<template>
  <div class="add-or-update-module">
    <div class="main">
      <div class="main-item">
        <div class="icon-name-row">
          <span style="color:red; position: absolute; left: 10px;">*</span>
          <img @click="showCoverDialog" :src="form.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/'+form.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-1.png'">
          <textarea placeholder="项目名称" :disabled="!canEdit" style="flex: 1; background:none; outline:none; border:none; overflow: auto; padding: 5px 10px;" v-model="form.taskName"></textarea>
        </div>
        <div class="row" v-if="!$route.params.plateId" @click="showModuleDialog"><span style="color:red; position: absolute; left: 10px;">*</span><div><i class="el-icon-box icons"></i><span>所属版块</span></div><div class="text-right">{{form.taskBelongName}}</div><i class="el-icon-arrow-right"></i></div>
        <div class="row" v-else><span style="color:red; position: absolute; left: 10px;">*</span><div><i class="el-icon-box icons"></i><span>所属版块</span></div><div class="text-right">{{form.taskBelongName}}</div></div>
        <div class="row"><span style="color:red; position: absolute; left: 10px;">*</span><div><i class="el-icon-date icons"></i><span>起止时间</span></div><div class="text-right" style="width: 190px;"><span :style="{'color': form.taskStartTime? 'black': '#C0C4CC'}" @click="selectDate('taskStartTime')">{{form.taskStartTime? form.taskStartTime: '选择开始时间'}}</span> - <span :style="{'color': form.taskEndTime? 'black': '#C0C4CC'}" @click="selectDate('taskEndTime')">{{form.taskEndTime? form.taskEndTime: '选择截止时间'}}</span></div></div>
        <div class="row" @click="showInfoDialog"><div><i class="el-icon-edit-outline icons"></i><span> 项目简介</span></div><div class="text-right">{{form.taskInfo}}</div><i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="main-item">
        <div class="row" @click="selectDingUsers('principal')"><span style="color:red; position: absolute; left: 10px;">*</span><div><i class="el-icon-user icons"></i><span>项目负责人</span></div><div class="text-right">{{dingUserList.principal.name.length > 0? dingUserList.principal.name.join(','): ''}}</div><i class="el-icon-arrow-right"></i></div>
        <div class="row" @click="selectDingUsers('confirm')"><span style="color:red; position: absolute; left: 10px;">*</span><div><i class="el-icon-user icons"></i><span>项目确认人</span></div><div class="text-right">{{dingUserList.confirm.name.length > 0? dingUserList.confirm.name.join(','): ''}}</div><i class="el-icon-arrow-right"></i></div>
        <div class="row" @click="selectDingUsers('manage', 100)"><div><i class="el-icon-user icons"></i><span>项目管理员</span></div><div class="text-right">{{dingUserList.manage.name.length > 0? dingUserList.manage.name.join(','): ''}}</div><i class="el-icon-arrow-right"></i></div>
        <div class="row" @click="selectDingUsers('cc', 300)"><div><i class="el-icon-user icons"></i><span>项目成员</span></div><div class="text-right">{{dingUserList.cc.name.length > 0? dingUserList.cc.name.join(','): ''}}</div><i class="el-icon-arrow-right"></i></div>
        <div class="row"><div><i class="el-icon-warning-outline icons"></i><span>任务参与人自动加入<el-tooltip effect="dark" placement="top"><div slot="content" style="width: 200px;">任务参与人包括创建人、指派人、负责人、确认人。无论项目对任务参与人是否可见，任务参与人都可在任务模块查看自己参与的任务。</div><i class="el-icon-info"></i></el-tooltip></span></div><div class="text-right"><el-checkbox v-model="form.taskAutoJoin" :disabled="!canEdit"></el-checkbox></div></div>
        <div class="row" @click="showTaskRangeDialog"><div><i class="el-icon-view icons"></i><span>可见范围</span></div><div class="text-right">{{form.taskRange==='1'? '团队所有人可见': '负责人、管理员、成员可见'}}</div><i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="main-item">
        <div class="row" @click="showPermissionDialog"><div><i class="el-icon-key icons"></i><span>操作权限</span></div><div><i class="el-icon-arrow-right"></i></div></div>
        <div class="row" @click="moreDialog = true" v-if="canMoreEdit"><div><i class="el-icon-more-outline icons"></i><span>更多选项</span></div><div><i class="el-icon-arrow-right"></i></div></div>
      </div>
    </div>
    <div class="bottom-btn">
      <div @click="goback">取消</div>
      <div @click="saveProject" :class="canEdit ? 'save' : 'forbidden'">保存</div>
    </div>
    <!-- 选择图片 -->
    <el-dialog title="选择图片" :visible.sync="coverDialog"  width="80%" :append-to-body="true">
      <div class="cover-wrapper">
        <div v-for="cover in 15" :key="cover">
          <img @click="selectCover('icon%20orange-' + cover + '.png')" :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-' + cover + '.png'" style="width: 40px; height: 40px;display:block;border-radius: 3px;">
        </div>
      </div>
    </el-dialog>
    <!-- 所属版块 -->
    <div class="select-page" v-if="showModule">
      <div class="module-panel">
        <div class="title">版块列表</div>
        <div class="module-wrapper">
          <div v-for="moduleItem in plateList" :key="moduleItem.id" class="module-item">
            <el-radio v-model="form.taskBelongId" :label="moduleItem.id" :disabled="moduleItem.hasProjectCreateAuthority === '0'">{{moduleItem.plateName}}</el-radio>
          </div>
        </div>
        <div class="bottom-btn">
          <div @click="selectPlate" class="save">确定</div>
        </div>
      </div>
    </div>
    <!-- 项目简介 -->
    <div class="info-page" v-if="showInfo">
      <div class="mobile-input-wp">
        <el-input style="width: 100%;" autofocus="true" placeholder="请输入项目描述" @input="detectInput" rows="8" v-model="form.taskInfo" type="textarea"></el-input>
      </div>
      <div class="upload-file">
        <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event)" multiple>
        <div class="upload-btn" @click="$refs.uploadInput.click()">添加附件</div>
        <div class="fileitem" v-for="(file, idx) in form.taskAttachment" :key="idx">
          <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
          <span style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
          <span class="uploadtip" v-if="file.url" @click="delFile(idx)"><i class="el-icon-delete"></i></span>
          <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click="showInfo = false;">确定</div>
      </div>
    </div>
    <!-- 可见范围 -->
    <el-dialog title="选择项目可见范围" :visible.sync="taskRangeDialog"  width="80%" :append-to-body="true">
      <div class="task-range-wrapper">
        <div @click="selectTaskRange('1')" class="row" :class="form.taskRange === '1'? 'active' : ''">团队所有人可见</div>
        <div @click="selectTaskRange('2')" class="row" :class="form.taskRange === '2'? 'active' : ''">负责人、管理员、成员可见</div>
      </div>
    </el-dialog>
    <!-- 操作权限 -->
    <div class="permission-page" v-if="showPermission">
      <div style="font-size: 18px; font-weight: bold; height: 40px; line-height: 40px; padding-left: 20px; border-bottom: 1px solid #dcdfe6;">操作权限</div>
      <div style="height: calc(100vh - 90px); overflow:auto;">
        <el-row>
          <el-col :span="24" class="title"><div><span style="font-weight: bold; margin-right: 8px;">创建任务</span><span style="font-size: 9px;">谁可以在项目内创建任务，包含任务的导入</span></div></el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="createRoleList" v-for="value in roleList" :key="value.index" :value="value.index">
              <span v-if="value.index <= 3" class="checkboxs">
                <el-checkbox :label="value.index">{{value.name}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="title"><div><span style="font-weight: bold; margin-right: 8px;">修改任务</span><span style="font-size: 9px;">谁可以修改任务，包含任务的重启、移动与终止</span></div></el-col>
          <el-col :span="20">
            <el-checkbox-group v-model="modifyRoleList" v-for="value in roleList" :key="value.index" :value="value">
              <span class="checkboxs">
                <el-checkbox :label="value.index">{{value.name}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="title"><div><span style="font-weight: bold; margin-right: 8px;">删除任务</span><span style="font-size: 9px;">谁可以删除任务</span></div></el-col>
          <el-col :span="20">
            <el-checkbox-group v-model="deleteRoleList" v-for="value in roleList" :key="value.index" :value="value">
              <span class="checkboxs">
                <el-checkbox :label="value.index">{{value.name}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <div class="bottom-btn">
        <div @click="showPermission = false;">取消</div>
        <div @click="selectRole">确定</div>
      </div>
    </div>
    <!-- 更多选项 -->
    <el-dialog title="更多选项" :visible.sync="moreDialog"  width="80%" :append-to-body="true">
      <div class="task-range-wrapper">
        <div @click="delProject" class="row">删除项目</div>
        <div @click="archiveProject" class="row">归档项目</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'

export default {
  data () {
    return {
      coverDialog: false,
      showModule: false,
      showInfo: false,
      taskRangeDialog: false,
      showPermission: false,
      moreDialog: false,
      plateList: [],
      dingUserList: { 
        principal: { id: [], img: [], name: []},
        confirm: { id: [], img: [], name: []},
        manage: { id: [], img: [], name: []},
        cc: { id: [], img: [], name: []},
      },
      roleList: [{
          index: '1',
          name: '项目负责人'
      },{
          index: '2',
          name: '项目管理员'
      },{
          index: '3',
          name: '项目成员'
      },{
          index: '4',
          name: '任务创建人'
      },{
          index: '5',
          name: '任务负责人'
      },{
          index: '6',
          name: '任务确认人'
      }],
      createRoleList: [],
      modifyRoleList: [],
      deleteRoleList: [],
      form: {
        taskName: '',
        taskUrl: '',
        taskStartTime: '',
        taskEndTime: '',
        taskInfo: '',
        taskAttachment: [],
        taskBelongId: '',
        taskBelongName: '',
        taskRange: 0,
        taskPrincipalId: '',
        principalAvatar: '',
        taskPrincipalName: '',
        taskConfirmId: '',
        confirmAvatar: '',
        taskConfirmName: '',
        taskManageId: '',
        managerAvatar: '',
        taskManageName: '',
        taskCcId: '',
        ccAvatar: '',
        taskCcName: '',
        taskAutoJoin: '',        //任务参与人是否自动加入到项目成员中(1:是（默认勾选），0否)
        taskCreateRole: '',     //项目或任务中任务创建角色(1:项目负责人，2：项目管理员，3：项目成员)
        taskModifyRole: '',     //项目或任务中任务修改角色(1:项目负责人，2：项目管理员，3：项目成员，4：任务创建人，5：任务负责人，6：任务确认人)
        taskDeleteRole: '',     //项目或任务中任务删除角色(1:项目负责人，2：项目管理员，3：项目成员，4：任务创建人，5：任务负责人，6：任务确认人)
        taskDatatype: 0,        //数据类型（1：项目，2：任务,3：子任务）
        taskStatus: 0
      },
    };
  },
  mixins: [dingMixin],
  components: {},
  async mounted () {
    this.init(this.$route.params.projectId)
    await this.getPlateList();
  },
  computed: {
    canEdit() {
      return (this.form.taskDeleteStatus === '0' && this.form.hasProjectAuthority === '1' && !!this.form.id) || (!this.form.id)
    },
    canMoreEdit() {
      return this.form.taskDeleteStatus === '0' && this.form.hasProjectAuthority === '1' && !!this.form.id
    },
  },
  methods: {
    detectInput() {
      if(this.form.taskInfo.charAt(this.form.taskInfo.length - 1) === '@'){
        this.complexPicker(1).then((data)=>{
          this.form.taskInfo += data[0].name + ' '
        })
      }
    },
    async init(projectId) {
      if (projectId) {
        this.form = await this.$httpN.postB('division/task/projectInfo', {id: projectId});
        if (this.form.taskPrincipalId !== '') this.dingUserList.principal.id = this.form.taskPrincipalId.split(',');
        if (this.form.principalAvatar !== '') this.dingUserList.principal.img = this.form.principalAvatar.split(',');
        if (this.form.taskPrincipalName !== '') this.dingUserList.principal.name = this.form.taskPrincipalName.split(',');
        if (this.form.taskConfirmId !== '') this.dingUserList.confirm.id = this.form.taskConfirmId.split(',');
        if (this.form.confirmAvatar !== '') this.dingUserList.confirm.img = this.form.confirmAvatar.split(',');
        if (this.form.taskConfirmName !== '') this.dingUserList.confirm.name = this.form.taskConfirmName.split(',');
        if (this.form.taskManageId !== '') this.dingUserList.manage.id = this.form.taskManageId.split(',');
        if(this.form.managerAvatar !== '')  this.dingUserList.manage.img = this.form.managerAvatar.split(',');
        if (this.form.taskManageName !== '') this.dingUserList.manage.name = this.form.taskManageName.split(',');
        if (this.form.taskCcId !== '')  this.dingUserList.cc.id = this.form.taskCcId.split(',');
        if (this.form.ccAvatar !== '')  this.dingUserList.cc.img = this.form.ccAvatar.split(',');
        if (this.form.taskCcName !== '')  this.dingUserList.cc.name = this.form.taskCcName.split(',');
        this.form.taskAttachment === ''? this.form.taskAttachment = [] : this.form.taskAttachment = JSON.parse(this.form.taskAttachment);

        this.form.taskAutoJoin === '1' ? this.form.taskAutoJoin = true : this.form.taskAutoJoin = false;
        this.createRoleList = this.form.taskCreateRole.split(',');
        this.modifyRoleList = this.form.taskModifyRole.split(',');
        this.deleteRoleList = this.form.taskDeleteRole.split(',');
      } else {
        if (this.$route.params.plateId) {
          this.form.taskBelongId = this.$route.params.plateId;
          this.form.taskBelongName = this.$route.params.plateName;
        }
        this.createRoleList = ['1', '2', '3'];
        this.modifyRoleList = ['1', '2', '3'];
        this.deleteRoleList = ['1', '2'];
        this.form.taskUrl = 'icon%20orange-1.png';
        this.form.taskStatus = '1';
        this.form.taskDatatype = '1';
        this.form.taskRange = "2";
        this.form.taskAutoJoin = true;
      }
    },
    showCoverDialog() {
      if(this.canEdit) this.coverDialog = true
    },
    selectCover(img) {
      this.coverDialog = false;
      this.form.taskUrl = img
    },
    showModuleDialog() {
      if(this.canEdit) this.showModule = true
    },
    showInfoDialog() {
      if(this.canEdit) this.showInfo = true
    },
    showTaskRangeDialog() {
      if(this.canEdit) this.taskRangeDialog = true
    },
    showPermissionDialog() {
      if(this.canEdit) this.showPermission = true
    },
    //获取版块列表
    async getPlateList(){
      await this.$httpN.postB('division/plate/list',{"participateType": 2, limit: 999}).then(res => {
        this.plateList = res.list;
      })
    },
    selectPlate() {
      this.showModule = false;
      this.plateList.forEach(item => {
        if (item.id === this.form.taskBelongId) {
          return this.form.taskBelongName = item.plateName;
        }
      });
    },
    selectDate(type) {
      if(!this.canEdit) return
      this.mobileSelectDate(this.currentDate, (date) => {
        this.form[type] = date;
        if(this.form.taskStartTime && this.form.taskEndTime && (new Date(this.form.taskStartTime) - new Date(this.form.taskEndTime) > 0) ) {
          this.form[type] = ''
          return this.mobileAlert('截止日期不可小于开始日期')
        }
      });
    },
    async uploadFile(e) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.mobileAlert('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        $this.form.taskAttachment.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.form.taskAttachment.pop();
          }
        })
      })
      e.target.value = '';
    },
    delFile(idx){
      this.form.taskAttachment.splice(idx, 1)
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    selectDingUsers(showName, number=1){
      if(!this.canEdit) return
      this.complexPicker(number, [] , this.dingUserList[showName].id).then(
        data=>{
          this.dingUserList[showName].id = data.map(item => item.emplId);
          this.dingUserList[showName].img = data.map(item => item.avatar);
          this.dingUserList[showName].name = data.map(item => item.name);
        }
      )
    },
    delMember(showName, index) {
      this.dingUserList[showName].id.splice(index,1);
      this.dingUserList[showName].img.splice(index,1);
      this.dingUserList[showName].name.splice(index,1);
    },
    selectTaskRange (type) {
      this.form.taskRange = type;
      this.taskRangeDialog = false;
    },
    selectRole() {
      this.form.taskCreateRole = this.createRoleList.join(',');
      this.form.taskModifyRole = this.modifyRoleList.join(',');
      this.form.taskDeleteRole = this.deleteRoleList.join(',');
      this.showPermission = false;
    },
    goback () {
      this.$route.params.plateId ? this.$router.push({ name: 'mlivolobim-module', params: {plateId: this.$route.params.plateId, plateName: this.$route.params.plateName, hasProjectCreateAuthority: this.$route.params.hasProjectCreateAuthority}}) :this.$router.go(-1);
    },
    async saveProject() {
      if(!this.canEdit) return this.mobileAlert('您没有操作权限');
      if(!this.form.taskName) return this.mobileAlert('请输入项目名称');
      if(this.form.taskName.length > 30) return this.mobileAlert('项目名称不要超过30个字');
      if(!this.form.taskBelongId) return this.mobileAlert('请选择所属版块');
      if(!this.form.taskStartTime) return this.mobileAlert('请选择项目开始时间');
      if(!this.form.taskEndTime) return this.mobileAlert('请选择项目结束时间');
      if(this.dingUserList.principal.id.length === 0 ) return this.mobileAlert('请选择项目负责人');
      if(this.dingUserList.confirm.id.length === 0 ) return this.mobileAlert('请选择项目确认人');
      if(this.form.taskAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');

      this.form.taskPrincipalId = this.dingUserList.principal.id.join(',');
      this.form.principalAvatar = this.dingUserList.principal.img.join(',');
      this.form.taskPrincipalName = this.dingUserList.principal.name.join(',');
      this.form.taskConfirmId = this.dingUserList.confirm.id.join(',');
      this.form.confirmAvatar = this.dingUserList.confirm.img.join(',');
      this.form.taskConfirmName = this.dingUserList.confirm.name.join(',');
      this.form.taskManageId = this.dingUserList.manage.id.join(',');
      this.form.managerAvatar = this.dingUserList.manage.img.join(',');
      this.form.taskManageName = this.dingUserList.manage.name.join(',');
      this.form.taskCcId = this.dingUserList.cc.id.join(',');
      this.form.ccAvatar = this.dingUserList.cc.img.join(',');
      this.form.taskCcName = this.dingUserList.cc.name.join(',');
      this.form.taskAutoJoin ? this.form.taskAutoJoin = '1' : this.form.taskAutoJoin = '0';
      this.form.taskCreateRole = this.createRoleList.join(',');
      this.form.taskModifyRole = this.modifyRoleList.join(',');
      this.form.taskDeleteRole = this.deleteRoleList.join(',');
      
      if(this.form.id) this.form.taskCreateTime = '';
      if(!await this.$httpN.postB(this.form.id ? 'division/task/projectOrTaskUpdate': 'division/task/projectOrTaskSave', this.form));
      this.mobileMessage('保存成功');
      window.NEEDREFRESH = true;
      this.goback();
    },
    //归档项目
    async archiveProject() {
      this.mobileConfirm('是否将此项目归档?', async ()=> {
        if(!await this.$httpN.postB('division/task/archive',{id: this.form.id})) return;
        this.mobileMessage('归档成功');
        window.NEEDREFRESH = true;
        this.$router.replace({name: 'mlivolobim-project'})
      })
    },
    //删除项目
    async delProject() {
      this.mobileConfirm('您确定要删除项目吗', async ()=> {
         if(!await this.$httpN.postB('division/task/projectOrTaskDelete',{id: this.form.id})) return;
        this.mobileMessage('删除成功');
        window.NEEDREFRESH = true;
        this.$router.replace({name: 'mlivolobim-project'})
      },() => {
        
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.add-or-update-module {
  width: 100%;
  height: 100vh;
  .main {
    height: calc(100% - 80px);
    overflow: auto;
    .main-item {
      margin-bottom: 10px;
      background-color: #FFF;
      .icon-name-row {
        padding: 20px;
        border-bottom: 1px solid #dcdfe6;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        img {
          width: 70px;
          height: 70px;
          border-radius: 3px;
        }
      }
      .row {
        position: relative;
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        &:last-child {
          border-bottom: none;
        }
        .el-icon-arrow-right {
          line-height: 50px;
        }
        .icons {
          margin-right: 10px;
        }
        .text-right {
          width: 180px;
          line-height: 50px;
          position: absolute;
          right: 34px;
          display: inline-block;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          text-align: right;
        }
      }
    }
  }
  .bottom-btn{
    display: flex;
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #F2F6FC;
    > div {
      width: 50%;
      text-align: center;
    }
    .save {
      background-color: #639EFC;
      color: #FFF;
    }
    .forbidden {
      background-color: #909399;
      color: #FFF;
    }
  }
  .select-page{
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    .module-panel{
      width: 80%;
      position: absolute;
      top:0;
      right: 0;
      height: 100%;
      background: white;
      .title{
        font-weight: bold;
        padding-left: 16px;
        border-bottom: 1px solid #F6F6F6;
        line-height: 46px;
      }
      .module-wrapper{
        height: calc(100% - 100px);
        overflow-y: auto;
        padding: 16px 16px;
        .module-item{
          padding-left:15px;
          line-height: 30px;
          border-bottom: 1px solid #F6F6F6;
          margin-bottom: 5px;
        }
      }
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        display: flex;
        div{
          flex:1;
          text-align: center;
          line-height: 50px;
          background: #F2F2F2;
          color: #8D8F96;
        }
        >div:last-child{
          color:white;
          background: #639EFC;
        }
      }
    }
  }
  .info-page{
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    padding: 16px;
    .bottom-btn{
      position: absolute;
      bottom: 0;
      right:0;
      width: 100%;
      display: flex;
      div{
        flex:1;
        text-align: center;
        line-height: 50px;
        color:white;
        background: #639EFC;
      }
    }
    .task-info{
      textarea{
        width: 100%;
        height: 250px;
        border: none;
        outline: none;
        resize:none;
        background: #F9F9F9;
        padding: 10px;
      }
    }
    .upload-file{
      margin-top: 30px;
      font-size: 14px;
      color: #409EFF;
      .upload-btn{
        color: #409EFF;
        margin-bottom: 10px;
      }
    }
    .fileitem{
      line-height: 32px;
      margin-bottom: 5px;
      background: #F5F5F5;
      padding-left:10px;
      font-size: 12px;
      color: #606266;
      .uploadtip{
        float:right;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .permission-page {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    .title {
      margin: 20px 0;
    }
    .el-row {
      padding: 0 20px;
      border-bottom: 10px solid #F2F2F2;
      .checkboxs {
        float: left;
        width: 50%;
        margin-bottom: 20px;
      }
    }
    .bottom-btn{
      position: absolute;
      bottom: 0;
      right:0;
      width: 100%;
      display: flex;
      div{
        flex:1;
        text-align: center;
        line-height: 50px;
        background: #F2F2F2;
        color: #8D8F96;
      }
      >div:last-child{
        color:white;
        background: #639EFC;
      }
    }
  }
}
.el-dialog__wrapper {
  .cover-wrapper{
    display: flex;
    flex-wrap: wrap;
    div{
      height: 40px;
      width: 40px;
      background: #E6A23C;
      color: white;
      line-height: 40px;
      text-align: center;
      font-size: 40px;
      position: relative;
      border-radius: 5px;
      margin: 5px;
    }
  }
  .task-range-wrapper {
    margin: -30px -20px 0 -20px;
    .row {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
    }
    .active {
      color: #409EFF;
    }
  }
}
</style>